<template>
  <div class="app-container">

    <u-page title="藏品管理">
      <div slot="header">
        <el-button type="primary" icon="el-icon-edit" @click="hdlOpen(newForm)">
          {{ textMap['create'] }}
        </el-button>
      </div>

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="标题" prop="title">
            <el-input v-model="listQuery.title" placeholder="请输入标题" clearable />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <u-status v-model="listQuery.status" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-dropdown>
              <el-button type="primary">
                批量操作<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :disabled="selectData.length===0" @click.native="hdlDel">批量删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="hdlDelete(row.id, row.title)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog :title="textMap[dialogStatus]" :show.sync="dialogFormVisible" @confirm="dialogStatus==='create'?hdlCreate():hdlUpdate()">
      <el-form ref="dialogForm" :rules="rules" :model="dataForm" label-width="80px">

        <el-form-item prop="title" label="藏品标题">
          <el-input v-model="dataForm.title" placeholder="藏品标题" clearable maxlength="30" show-word-limit />
        </el-form-item>

        <el-form-item prop="description" label="藏品摘要">
          <el-input v-model="dataForm.description" type="textarea" placeholder="商品描述" clearable maxlength="300" show-word-limit />
        </el-form-item>

        <el-form-item prop="block" label="首页图片">
          <u-upload v-model="dataForm.block" name="file" tips="建议尺寸:300 * 300 , 请将所有图片尺寸比例保持一致" />
        </el-form-item>

        <el-form-item prop="thumb" label="藏品图片">
          <u-upload v-model="dataForm.thumb" name="file" tips="建议尺寸:300 * 450 , 请将所有图片尺寸比例保持一致" />
        </el-form-item>

        <el-form-item prop="circle" label="藏品边框">
          <u-upload v-model="dataForm.circle" name="file" tips="建议尺寸:280 * 405 , 请将所有图片尺寸比例保持一致" />
        </el-form-item>

        <!--        <el-form-item label="有效期" prop="validityDate">
                  <u-date-time-picker v-model="dataForm.validityDate" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" @change="changeDate" />
                </el-form-item>-->

        <el-form-item label="发放总量" prop="ifNumLimit">
          <el-radio-group v-model="dataForm.ifNumLimit">
            <el-radio :label="false">不限制</el-radio>
            <el-radio :label="true">限制</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="dataForm.ifNumLimit" label="限制库存" prop="stock">
          <el-input v-model="dataForm.stock" placeholder="请输入库存" style="width: 150px" />
          <span style="margin-left: 10px">张</span>
        </el-form-item>

        <el-form-item prop="label" label="藏品标签">
          <el-input v-model="dataForm.label" placeholder="不同标签,英文逗号隔开" clearable />
        </el-form-item>

        <el-form-item prop="content" label="藏品内容">
          <u-tinymce v-model="dataForm.content" :height="300" />
        </el-form-item>

        <el-form-item label="选择权益" prop="gainId">
          <gain v-model="dataForm.gainId" width="160px"/>
        </el-form-item>

        <el-form-item prop="location" label="排序">
          <el-input v-model="dataForm.location" placeholder="数字越大，排名越靠前" clearable />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dataForm.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
    </u-dialog>

  </div>
</template>
<script>
import gain from '../components/gain'
export default {
  components: {
    gain
  },
  data() {
    return {
      api: this.$u.api.PluginsNftGoods,
      // 表格
      columns: [
        {
          prop: 'title',
          label: '标题'
        },
        {
          prop: 'block',
          label: '首页图片',
          image: true
        },
        {
          prop: 'thumb',
          label: '图片',
          image: true
        },
        {
          prop: 'gainId',
          label: '对应权益',
          width: '80',
          formatter: (row, column) => {
            const { gain } = row
            if (gain) {
              return gain.title
            }
          }
        },
        /* {
          prop: 'validityDate',
          label: '有效期日期',
          width: '180',
          render: (h, params) => {
            let { beginDate, endDate } = params.row
            if (!beginDate) {
              beginDate = '不限制'
            }
            if (!endDate) {
              endDate = '不限制'
            }
            return [
              h('el-tag', { props: { effect: 'plain' }}, '起始:' + beginDate),
              h('br'),
              h('el-tag', { props: { effect: 'plain' }}, '终止:' + endDate)
            ]
          }
        }, */
        {
          prop: 'stock',
          label: '发放总量',
          width: '100',
          formatter: (row) => {
            if (row.ifNumLimit) {
              return row.stock
            } else {
              return '不限制'
            }
          }
        },
        {
          prop: 'total',
          label: '已领取',
          width: '100'
        },
        {
          prop: 'surplus',
          label: '剩余数量',
          width: '100',
          formatter: (row) => {
            if (row.ifNumLimit) {
              return row.surplus
            } else {
              return '不限制'
            }
          }
        },
        {
          prop: 'location',
          label: '顺序',
          width: '70'
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            if (params.row.status) {
              return h('el-tag', { props: { type: 'success' }}, '已启用')
            } else {
              return h('el-tag', { props: { type: 'danger' }}, '禁用')
            }
          }
        },
        {
          prop: 'createdAt',
          label: '创建时间',
          sortable: true,
          timestamp: true
        }
      ],

      list: [],
      listLoading: true,
      listOptions: {
        mutiSelect: true, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        title: '',
        status: ''
      },

      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑藏品',
        create: '新增藏品'
      },
      dataForm: {},
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: ['blur'] }
        ],
        block: [
          { required: true, message: '请选择图片', trigger: ['change'] }
        ],
        thumb: [
          { required: true, message: '请选择图片', trigger: ['change'] }
        ],
        circle: [
          { required: true, message: '请选择图片', trigger: ['change'] }
        ],
        ifNumLimit: [
          { required: true, message: '请选择', trigger: ['blur'] }
        ],
        stock: [
          { required: true, message: '请输入库存', trigger: ['blur'] }
        ],
        label: [
          { required: true, message: '请输入标签（不同标签英文逗号隔开）', trigger: ['blur'] }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: ['blur'] }
        ]
      },
      // 删除选中数据
      selectData: [],
      newForm: {
        status: true,
        ifNumLimit: false
      }
    }
  },
  created() {
    this.hdlList()
  },
  methods: {
    changeDate(item) {
      if (item) {
        this.dataForm.beginDate = item[0]
        this.dataForm.endDate = item[1]
      } else {
        this.dataForm.beginDate = ''
        this.dataForm.endDate = ''
      }
    },
    // 打开修改弹窗
    handleEdit(row) {
      const { beginDate, endDate } = row
      row.validityDate = []
      if (beginDate && endDate) {
        row.validityDate = [beginDate, endDate]
      }
      this.hdlEdit(row)
    }
  }
}
</script>
